<script setup>
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { getMvUrl, getMvSimi, getMvDetail } from "../../apis/video";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import { createWindow } from "../../utils/ipcRenderer";

const route = useRoute();
const videoData = route.query;
const detailData = ref();
const simiMvList = ref([]);

const options = reactive({
  // width: "800px", //播放器高度
  // height: "450px", //播放器高度
  color: "#8055ebef", //主题色
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  title: "", //视频名称
  src: "", //视频源
  poster: "", //封面
});
//获取mv详情
const getInit = async () => {
  let res = await getMvDetail({ mvid: videoData.id });
  detailData.value = res.data;

  getMvSimi({ mvid: videoData.id }).then((res) => {
    simiMvList.value = res.mvs;
  });

  await getUrl();
};

getInit();

//获取视频地址
const getUrl = async () => {
  // getVideoUrl({ id: videoData.id }).then((res) => {
  //   console.log(res);
  // });
  getMvUrl({ id: videoData.id }).then((res) => {
    options.src = res.data.url;
    options.title = res.data.name;
  });
};

const handleVideo = (id) => {
  createWindow({
    windowName: "videoDetail",
    path: "videoDetail",
    width: 1360,
    height: 820,
    param: { id: id },
  });
};

const onPlay = (ev) => {
  console.log("播放");
};
const onPause = (ev) => {
  console.log(ev, "暂停");
};

const onTimeupdate = (ev) => {
  // console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
  console.log(ev, "可以播放");
};
</script>
<template>
  <header-bar title="视频详情"></header-bar>
  <div class="wrapper">
    <el-scrollbar height="100%">
      <div class="wrap f-c-c">
        <videoPlay
          v-bind="options"
          @play="onPlay"
          @pause="onPause"
          @timeupdate="onTimeupdate"
          @canplay="onCanplay"
        />
        <div class="info" v-if="detailData">
          <div class="name">
            {{ detailData.artistName + "-" + detailData.name }}
          </div>
          <div class="time">
            <span>播放:{{
              detailData.playCount > 100000
                ? Math.floor(detailData.playCount / 100000) + "万"
                : detailData.playCount
            }}</span>
            <span>{{ detailData.publishTime }}</span>
          </div>
        </div>
        <div class="video_more">
          <div class="title">相关推荐</div>
          <div class="video_wrap">
            <div
              class="item_wrap"
              v-for="(item, index) in simiMvList"
              :key="item.id"
            >
              <div class="item">
                <div class="cover">
                  <el-image
                    @click="handleVideo(item.id)"
                    :src="item.cover"
                    fit="cover"
                  ></el-image>
                </div>
                <div class="title">{{ item.name }}</div>
                <div class="name">{{ item.artistName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  height: calc(100% - 40px);
}
.wrap {
  padding: 20px 30px;
  flex-direction: column;
  #refPlayerWrap {
    width: 90%;
    height: 50%;
    aspect-ratio: 7/4;
    border-radius: 20px;
  }
  #id {
    width: 100%;
    video {
      width: 90%;
      height: 50%;
      aspect-ratio: 7/4;
      border-radius: 20px;
    }
  }

  .info {
    padding: 20px 0;
    width: 90%;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 18px;
      font-weight: 600;
    }
    .time {
      font-size: 14px;
      color: #666;
      span {
        margin-left: 10px;
      }
    }
  }
  .video_more {
    width: 93%;
    .title {
      font-size: 18px;
      font-weight: 600;
      margin: 10px 10px;
    }
    .video_wrap {
      display: grid;
      justify-content: space-around;
      grid-template-columns: repeat(auto-fill, 15vw);

      .item_wrap {
        .item {
          margin-bottom: 20px;
          .cover {
            position: relative;
            height: 15vh;
            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 13px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                0 0 6px rgba(0, 0, 0, 0.04);
              transition: all 0.3s;
            }
            .el-image:hover {
              transform: translateY(-8px);
            }
            .count {
              position: absolute;
              font-size: 8px;
              z-index: 5;
              top: 2%;
              right: 2%;
              color: #fff;
            }
            .el-icon-caret-right {
              font-size: 15px;
            }
            .time {
              position: absolute;
              font-size: 8px;
              z-index: 5;
              bottom: 2%;
              right: 2%;
              color: #fff;
            }
          }
          .title {
            font-size: 15px;
            font-weight: 600;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .name {
            font-size: 10px;
            color: #6e6e69;
          }
        }
      }
    }
  }
}
</style>
